<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
<div class="dd">
    <h3>计算属性(只读)</h3>
    姓:{{name1}} <br> 名:{{name2}} <br> 全名: {{myName}}<br>
    <h3>计算属性(可读写)</h3>
    姓:{{name1}} <br> 名:{{name2}} <br> 全名: {{myName1}}<br>
    <input v-model="myName1">

    <h3>watch 属性值监听</h3>
    <input v-model="number" type="number">


</div>
<script>
    var v = new Vue({
        el : ".dd",
        data : {
            name1 : "张",
            name2 : "三",
            number : 100
        },
        // 计算属性节点
        computed : {
            // 函数名 = 》 属性名， 函数返回值就是属性值
            myName(){
                return this.name1 + this.name2;
            },
            myName1 : {
                // 取值
                get(){
                    return this.name1 + this.name2;
                },
                // 设值
                // 属性监听
                set(newValue){
                    // 暂时不考虑 复姓 欧阳
                    this.name1 = newValue.substring(0,1);
                    this.name2 = newValue.substring(1);
                },
            }
        },
        // watch 用于属性值变化监听
        watch : {
            number(newValue, oldValue){
                console.info(newValue, oldValue);
                this.name1 += newValue;
            }
        }
    })
</script>
</body>
</html>